@import  "../../../node_modules/normalize.css/normalize.css";
// 常量
@ppr: 75rem;
@main-color: #ff6655;
@pingan-color: hsl(216, 73%, 54%);
@bg-color: #f5f5f8;
@font-family: "Helvetica", "HelveticaNeue", "Microsoft YaHei", "微软雅黑", "Heiti SC", "PingFang SC";

@cq-main-text-color: #2e2e36;
@cq-text-color: #8c8c94;
@cq-link-color: rgb(64, 158, 255);
@cq-font-family: "PingFang SC", "Helvetica", "HelveticaNeue", "Microsoft YaHei", "微软雅黑", "Heiti SC";
@cq-line-color: rgb(232, 234, 238);
@cq-nav-line-color: rgb(210, 211, 216);
@cq-bg-color: #f5f5f8;
@cq-bg-color-dark: #f5f5f8;
@cq-main-color: #ff6655;
@cq-gap-height: 18/@ppr;
@cq-date-color: #b5b5b5;
@cq-info-color: #d2d3d8;

html, body {
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  // font-family: "Microsoft YaHei";
  touch-action: manipulation;
  font-family: @font-family;
  overflow: hidden;
  // ios禁止用户调整字体大小
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;
}

@font-face {
  font-family: 'DINCond-Bold';
  src: url('../../fonts/DINCond-Bold.otf');
}
@font-face {
  font-family: 'DINMittelschrift-Alternate';
  src: url('../../fonts/DINMittelschrift-Alternate.otf');
}

input, textarea {
  border-width: 0;
  padding: 0;
  border: none;
  outline: none;
  appearance: none;
  // font-family: "Microsoft YaHei";
  font-family: @font-family;
  &:focus {
    border: none;
    outline: none;
  }
}

a, a:link, a:hover, a:focus, a:active {
  text-decoration: none;
  color: inherit;
}

.full-screen {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#app {
  .full-screen();
}

// 阴影
.shawdow(@color, @angle, @distance, @spread, @size) {
  @shawdow: @distance * cos(180deg - @angle) @distance * sin(180deg - @angle) @size - @spread * @size @spread * @size @color;
}

.shawdow(@color, @angle, @distance, @spread, @size, @inset) {
  @shawdow: @distance * cos(180deg - @angle) @distance * sin(180deg - @angle) @size - @spread * @size @spread * @size @color @inset;
}


// 字体
.fontSize(@px) {
  font-size: round(@px / 2) * 1px;
  [data-dpr="2"] & {
    font-size: @px * 1px;
  }
  // for mx3
  [data-dpr="2.5"] & {
    font-size: round(@px * 2.5 / 2) * 1px;
  }
  // for 小米note
  [data-dpr="2.75"] & {
    font-size: round(@px * 2.75 / 2) * 1px;
  }
  [data-dpr="3"] & {
    font-size: round(@px / 2 * 3) * 1px
  }
  // for 三星note4
  [data-dpr="4"] & {
    font-size: @px * 2px;
  }
}


.row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
}

.btn-disabled {
  opacity: 0.4;
}

.base-btn {
  .directional-gradient(#fd5251, #fe8b47);
  position: relative;
  border-radius: 49/@ppr;
  font-size: 36/@ppr;
  height: 98/@ppr;
  color: white;
  text-align: center;
  font-weight: 700;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  .btn-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    .spinner {
      font-size: 60/@ppr;
      color: white;
      animation: btn-spinner .8s linear infinite;
    }
  }
}


@keyframes btn-spinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.toast {
  line-height: unset;
  min-height: unset;
  background: rgba(0, 0, 0, 0.4);
  padding: 30/@ppr 50/@ppr;
  border-radius: 8/@ppr;
  z-index: 100;
  .text {
    padding: 0;
    margin: 0;
    color: white;
    font-size: 30/@ppr;
    text-align: center;
    position: relative;
  }
}

.place-holder(@color) {
  &::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: @color;
  }
  &::-moz-placeholder {
    /* Firefox 19+ */
    color: @color;
  }
  &:-ms-input-placeholder {
    /* IE 10+ */
    color: @color;
  }
  &:-moz-placeholder {
    /* Firefox 18- */
    color: @color;
  }
}

.scrollable() {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.btn-hover() {
  &:focus{
    opacity: 0.7;
  }
}

// 1px 解决方案
.hairline(@position, @color) when(@position=all) {
  position: relative;
  overflow: hidden;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 400%;
    height: 400%;
    border: 1px solid @color;
    box-sizing: border-box;
    transform-origin: top left;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      transform: scale(0.5);
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
      transform: scale(1/3);
    }
  }
    &:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 400%;
    height: 400%;
    border: 1px solid @color;
    box-sizing: border-box;
    transform-origin: bottom right;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      transform: scale(0.5);
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
      transform: scale(1/3);
    }
  }
}
.hairline(@position, @color) when (@position =top) {
  position: relative;
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    height: 1px;
    width: 100%;
    background-color: @color;
    display: block;
    z-index: 15;
    transform-origin: 50% 0%;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      transform: scaleY(0.5);
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
      transform: scaleY(0.33);
    }
  }
}

.hairline(@position, @color) when (@position =left) {
  position: relative;
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: auto;
    right: auto;
    width: 1px;
    height: 100%;
    background-color: @color;
    display: block;
    z-index: 15;
    transform-origin: 0% 50%;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      transform: scaleX(0.5);
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
      transform: scaleX(0.33);
    }
  }
}

.hairline(@position, @color) when (@position =bottom) {
  position: relative;
  &:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    height: 1px;
    width: 100%;
    background-color: @color;
    display: block;
    z-index: 15;
    transform-origin: 50% 100%;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      transform: scaleY(0.5);
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
      transform: scaleY(0.33);
    }
  }
}

.hairline(@position, @color) when (@position =right) {
  position: relative;
  &:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    left: auto;
    bottom: auto;
    width: 1px;
    height: 100%;
    background-color: @color;
    display: block;
    z-index: 15;
    transform-origin: 100% 50%;
    @media only screen and (-webkit-min-device-pixel-ratio: 2) {
      transform: scaleX(0.5);
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 3) {
      transform: scaleX(0.33);
    }
  }
}

// For right and bottom
.hairline-remove(@position) when not (@position =left) and not (@position =top) {
  &:after {
    display: none;
  }
}

// For left and top
.hairline-remove(@position) when not (@position =right) and not (@position =bottom) {
  &:before {
    display: none;
  }
}

// For right and bottom
.hairline-color(@position, @color) when not (@position =left) and not (@position =top) {
  &:after {
    background-color: @color;
  }
}

// For left and top
.hairline-color(@position, @color) when not (@position =right) and not (@position =bottom) {
  &:before {
    background-color: @color;
  }
}

.hairline(@type, @color, @offset) when (@type =single) {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#{@color}' x='0' y='0' width='100%' height='0.5'/></svg>");
  background-position: @offset 100%;
}

.hairline(@type, @color, @offset) when (@type =double) {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#{@color}' x='0' y='0' width='100%' height='0.5'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='1'><rect fill='#{@color}' x='0' y='0' width='100%' height='0.5'/></svg>");
  background-position: @offset 100%, @offset 0;
  background-repeat: no-repeat;
}

.linear-gradient(@color-from, @color-to) {
  background-color: @color-from; // Old browsers
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @color-from), color-stop(100%, @color-to)); // Chrome, Safari4+
  background-image: -webkit-linear-gradient(top, @color-from 0%, @color-to 100%); // Chrome10+, Safari5.1+
  background-image: -moz-linear-gradient(top, @color-from 0%, @color-to 100%); // FF3.6+
  background-image: -ms-linear-gradient(top, @color-from 0%, @color-to 100%); // IE10+
  background-image: -o-linear-gradient(top, @color-from 0%, @color-to 100%); // Opera 11.10+
  background-image: linear-gradient(to bottom, @color-from 0%, @color-to 100%); // W3C
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{@color-from}', endColorstr='#{@color-to}', GradientType=0); // IE6-9
}

.directional-gradient(@color-from, @color-to, @deg: 45deg) {
  background-color: @color-from; // Old browsers
  background-image: -webkit-gradient(linear, left bottom, right top, color-stop(0%, @color-from), color-stop(100%, @color-to)); // Chrome, Safari4+
  background-image: -webkit-linear-gradient(@deg, @color-from 0%, @color-to 100%); // Chrome10+, Safari5.1+
  background-image: -moz-linear-gradient(@deg, @color-from 0%, @color-to 100%); // FF3.6+
  background-image: -ms-linear-gradient(@deg, @color-from 0%, @color-to 100%); // IE10+
  background-image: -o-linear-gradient(@deg, @color-from 0%, @color-to 100%); // Opera 11.10+
  background-image: linear-gradient(@deg, @color-from 0%, @color-to 100%); // W3C
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{@color-from}', endColorstr='#{@color-to}', GradientType=1); // IE6-9
}

[contenteditable] {
  user-select: text;
}


@svg dash-line {
  height: var(--h, 1px);
  width: var(--w, 750px);
  @line {
    stroke-dasharray: var(--dash, 9px, 3px);
    stroke: var(--color, #333333);
    stroke-width: 100%;
    x1: 0;
    y1: 0;
    x2: 750;
    y2: 0;
  }
}

.dash-bottom(@color: black) {
  border-bottom: 2px solid transparent;
  border-image-source: svg(dash-line);
  border-image-repeat: stretch;
}


.modal-guangxi {
  background: rgba(0, 0, 0, 0.3);
  justify-content: flex-end;
  align-items: stretch;
  padding: 30/@ppr 20/@ppr;
  flex-direction: column;
}

.flex-blank {
  flex: 1;
}

.list-footer {
  height: 100/@ppr;
  font-size: 22/@ppr;
  color: rgb(177, 177, 184);
  text-align: center;
  line-height: 100/@ppr;
}

.list-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: rgb(177, 177, 184);
  font-size: 26/@ppr;
  font-weight: 500;
  padding: 0;
  margin: 34/@ppr;
  word-break: break-all;
  .icon {
    width: 163/@ppr;
    height: auto;
    margin-bottom: 20/@ppr;
  }
}

.error-page {
  .full-screen();
  background: @bg-color;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 40/@ppr;
  .icon {
    margin-top: -100/@ppr;
    width: 150/@ppr;
    height: auto;
    margin-bottom: 30/@ppr;
  }
  .title {
    font-size: 32/@ppr;
    color: #b5b5b5;
    text-align: center;
    line-height: 50/@ppr;
    word-break: break-all;
  }
}

.service-tel-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  .service-text {
    padding: 0;
    margin: 0;
    color: rgb(177, 177, 184);
    font-size: 24/@ppr;
    line-height: 40/@ppr;
    .tel {
      color: rgb(64, 158, 255);
      font-weight: bold;
    }
  }
  .tel-icon {
    width: 70/@ppr;
    height: 70/@ppr;
  }
}
